<template>
    <div>
        <div class="lian_box">
            <p style="color: red;font-size: 22px;">第{{ practiceList.phase }}期</p>
            <h1>{{ practiceList.title }}</h1>
        </div>
        <div class="lian_boss">
            <p v-for="(item, index) in hqa">{{ item }}</p>
        </div>
        <div style="display: flex;justify-content: center;">
            <button class="butt" style="cursor: pointer;" @click="open(practiceList.practice_id)">开始</button>
        </div>
    </div>
</template>

<script setup lang="ts">
import { useRouter } from 'vue-router'
import { practice } from '@/api/team'
import { ref } from 'vue';
let practiceList = ref({
    phase: '',
    practice_id: '',
    rule: '',
    title: ''
})
let hqa = ref()
const hqpractice = () => {
    practice().then(res => {
        console.log(res.data.data, 'ssss')
        practiceList.value = res.data.data
        hqa.value = res.data.data.rule.split('\n')
    })
}
hqpractice()
let Router = useRouter()
const open = (id: any) => {
    Router.push({ path: '/home/openexam', query: { id } })
}
</script>

<style lang="scss" scoped>
.lian_box {
    margin-top: 130px;
    text-align: center;

    p {
        margin-bottom: 30px;
        text-align: center;
    }
}

.lian_boss {
    width: 660px;
    height: 300px;
    background: #FFF4F4;
    margin: 60px auto;
    // overflow: auto;
    padding: 10px 0;

    p {
        line-height: 15px;
        margin: 15px;
    }
}

.butt {
    width: 240px;
    height: 60px;
    background: #E02020;
    color: #fff;
    border-radius: 35px;
    border: none;
    font-size: 22px;

    // margin: 30px auto;
}
</style>